<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul li ul {
				display: none;
				padding-left: 20px;
			}
			
			.active {
				color: redornflowerblue;
			}
			
			.open>a {
				color: #7FFFD4;
			}
		</style>
	</head>

	<body>

		<ul>
			<li>

				<a>1234></a>
				<ul>
					<li>
						<a>1</a>
					</li>
					<li>
						<a>2</a>
					</li>
					<li>
						<a>3</a>
					</li>
					<li>
						<a>4</a>
					</li>
				</ul>
			</li>
			<li>
				<a>5678></a>
				<ul>
					<li>
						<a>5></a>
						<ul>
							<li>
								<a>51</a>
							</li>
							<li>
								<a>52</a>
							</li>
							<li>
								<a>53</a>
							</li>
							<li>
								<a>54</a>
							</li>
						</ul>
					</li>
					<li>
						<a>6</a>
					</li>
					<li>
						<a>7</a>
					</li>
					<li>
						<a>8</a>
					</li>
				</ul>
			</li>
			<li>
				<a>9</a>
			</li>
			<li>
				<a>10</a>
			</li>
			<li>
				<a>11</a>
			</li>
		</ul>

	</body>
	<script type="text/javascript" src="jquery-2.1.0.js"></script>
	<script>
		$('li>a,li>em').click(function(event) {
			/* Act on the event */
			if($(this).parent('li').find('ul').length > 0) {
				if($(this).siblings('ul').is(':hidden')) {
					$(this).parent('li').addClass('open').children('ul').show();
					$(this).parent('li').siblings().removeClass('open').children('ul').hide();
				} else {
					$(this).parent('li').removeClass('open').children('ul').hide();
				}
			} else {
				$(this).parent('li').siblings().removeClass('open');
			}
			$(this).parent('li').siblings().children('ul').hide();
			$(this).addClass('active').parent('li').siblings('li').find('a').removeClass('active');
		})
	</script>

</html>